<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      h2{
        width: 100px;
        height: 100px;
        font-size: 50px;
        border: 1px solid #000;
      }
    </style>
    <title>Document</title>
</head>
<body>
    <!-- for循环 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
<!-- 沙箱模式写计数器 -->
    <button class="sub">sub</button>
    <input type="text" class="conter">
    <button class="add">add</button>
    <!-- 粗糙的vue -->
<div class="vue"></div>
</body>
</html>
<script src="./lodash.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
//深浅拷贝
    // const obj = {
    //     name:"jack",
    //     age:18,
    //     year:2002-1-1
    // }
    // const newObj = {};
    // newObj.name = obj.name;
    // obj.name = "Roce";
    // console.log(newObj,obj);


    // const obj = {
    //     name:"jack",
    //     age:18,
    //     year:2002-1-1,
    //     fn(){
    //         console.log("深克隆");
    //     }
    // }
    // const newObj = {}
    // for (const key in obj) {
    //     if (Object.hasOwnProperty.call(obj, key)) {
            
    //         newObj[key] = obj[key];
    //     }
    // }
    // newObj.name = "Roce";
    // console.log(obj);
    // console.log(newObj);




    // const obj = {
    //     name:"jack",
    //     age:18,
    //     year:2002-1-1,
    //     fn(){
    //         console.log("深克隆");
    //     }
    // }
    // const newObj = {}
    // function clone(obj){
    //     for(const key in obj){
    //         if()
    //         newObj[key] = obj[key];
    //     }
    // }


    // const arr = "ghjkl";
    // console.log(...arr.match(["g"]))


//封装
    // function Student(){
    //     this.name = "jack",
    //     this.age = 18
    // }
    // Student.prototype.__proto__.sayHello = function(){
    //     console.log("hello");
    // }
    
    // function Teacher(name,age){
    //     this.name = name
    //     this.age = age
    // }
    // function Person() {}
    // Person.prototype.sayHi = function(){
    //     console.log("hello world");
    // }
    // // Student.prototype = new Person();

    // const laozhang = new Teacher("laozhang",30);
    // const xiaoming = new Student("Jack",18);
    // console.log(xiaoming.sayHello);
    // console.log(xiaoming.sayHi);
    // console.log(laozhang.sayHello);





    // function Person(name,height,weight){
    //     this.name = name;
    //     this.height = height;
    //     this.weight = weight;
    // }
    // Person.prototype.sayHi = function(){
    //     console.log("原型方法");
    // }
    
    // function Teacher(level,name,height,weight){
    //     this.level = level;
    //     Person.call(this,name,height,weight);
    // }
    // Teacher.prototype = new Person;
    // const xiaoming = new Teacher("数学","zhang","185cm","63kg");
    // console.log(xiaoming.sayHi());


//闭包
//for循环
        const ulLis = document.querySelectorAll("ul>li");

        // for(var i=0;i<ulLis.length;i++){
        //     ulLis[i].onclick = (function(x){
        //          return function(){
        //             console.log(x);
        //          }
        //     })(i) 
        // }

        // for(var i=0;i<ulLis.length;i++){
        //     ulLis[i].addEventListener("click",function(){

        //     }.bind())
        // }


        //正确案例
        // for (var i = 0; i < lis.length; i++) {
        //     lis[i].onclick = (function(x) {
        //     return function() {
        //         log('Yo', x);
        //     }
        //     })(i);

        //     // (function(x) {
        //     //   log('123', x)
        //     // })(i)
        // }

     //this有关    https://www.runoob.com/w3cnote/js-call-apply-bind.html
        // const name = "xiaowang",age = 17;
        // const obj = {
        //     name : "小张",
        //     ageName : this.age,
        //     myfun : function(){
        //         console.log(this.name+"年龄"+this.age);
        //     }
        // }
        // console.log(obj.ageName)
   
//沙箱模式  -> 写计数器
//实现_.before的作用原理
//垃圾回收机制

    
// //柯里化
//     const add = _.curry(_.add)(10);
//     const mil = _.curry(_.multiply)(10);
//     const div = _.curryRight(_. divide)(5);
//     const f = _.flow([
//         add,
//         mil,
//         div
//     ])
//     f(10);
//     const f1 = x => (x+10)*10/5;
//     f1(10)
// //结构化
//         const f2 = div(mil(add(10)))



// d3 -time -format
// const formap = d3.timeFormat("%H:%M:%S %Y~%m~%d ")



// /
                    //把上面的代码改成_.flow形式
// let time = '2001-01-01';
// setInterval(()=>{
//     document.body.innerHTML = time;
//     time = offset1D(time);
// },1000)  





// //粗糙的vue
//     const obj = {
//         name:"jack",
//         age:18
//     }

//     function update(){
//         const box = document.querySelector(".vue");
//         box.innerHTML = `<div>姓名：${obj.name}</div>
//                     <div>年龄：${obj.age}</div>`
//     }
//     update()
//     function fixs(type,val){
//         return {
//             get(){
//                 return obj.type ;
//             },
//             set(val){
//                 obj.type = val;
//                 update();
//             }
//         }
//     }
//     console.log(fixs(name,"Rose").get())

  


// //响应式开发  
// const data = {
//     name:"jack",
//     age:20
// }
// function updata(data){
//   const box = document.querySelector(".vue");  
//   box.innerHTML = `
//     <div>
//       <span style="font-weight: bold">姓名：</span> 
//       <span>${data.name}</span> 
//     </div>
//     <div>
//       <span style="font-weight: bold">年龄：</span> 
//       <span>${data.age}</span>
//     </div>
//     `
// }
  //第一种  Object.defineProperty
      // function see(render,data){
      //   render(data); 
      //   const wrap = {}
      //   for (const key in data) {
      //     Object.defineProperty(wrap, key, {
      //       set(val) {
      //         data[key] = val;
      //         render(data); 
      //       }
      //     })
      //   }
      //   return wrap;
      // }
      // const vm = see(updata,data);
      
  //第二种 proxy
  // const see = new Proxy(data,key,{
  //   set(){

  //   }
  // })




// 案例：输入一个 %Y-%m-%d 格式的时间， 在页面中，以1S的速度，一次加1天
  // '2001-1-1'  一秒过后-> '2001-1-2'
// function offset1D(strTime) {
//    const parse = d3.timeParse('%Y-%m-%d');
//   const parsedTime = parse(strTime);
//   const add1Time = d3.timeDay.offset(parsedTime, -1);
//    const format = d3.timeFormat('%Y-%m-%d');
//   return format(add1Time);
// }

// let time = '2001-01-01';
// setInterval(() => {
//   document.body.innerHTML = time;
//   time = offset1D(time);
// }, 1000);


//封装 offset，能支持 年、月、周、日 单位的调整：用闭包和策略模式
  //第一种方法：
    // function offset(strTime,set,time){
    //   const parse = d3.timeParse('%Y-%m-%d');
    //   const parsedTime = parse(strTime);
    //   const add1Time = d3['time'+set].offset(parsedTime, time);
    //   const format = d3.timeFormat('%Y-%m-%d');
    //   console.log(format(add1Time)); ;
    // }
    // offset('2001-08-31','Year',-2);
  //第二种方法:
//   const types = {
//     "year": "timeYear",
//     "month": "timeMonth",
//     "day": "timeDay",
//     "week": "timeWeek"
//   }

// function offset(strTime,type,time) {
//     const parse = d3.timeParse('%Y-%m-%d');
//     const parsedTime = parse(strTime);
//     const add1Time = d3[types[type]].offset(parsedTime,time);
//     const format = d3.timeFormat('%Y-%m-%d');
//     console.log(format(add1Time));
// }
// offset("2022-10-20","day",10)




迭代模式
function* fn(){
  yield "hello";
  yield "world";
  return "!!!"
}
const res = fn();



//单例模式
// function fn(msg){
//   const h2 = document.querySelector("h2");
//   if(h2){
//     console.log("有");
//     h2.innerText = msg;
//   }else{
//     console.log("没有");
//     const h2 = document.createElement("h2");
//     h2.innerText = msg;
//     document.body.appendChild(h2);
//   }
// }




// //观察者模式
// const fn1 = (data)=>{
//   console.log("这是第一个函数",data);
// }
// const fn2 = (data)=>{
//   console.log("这是第二个函数",data);
// }

// class Event{
//   constructor() {
//     this.obj = {}
// }
//   on(type,fn){
//     if(this.obj[type]===undefined){
//       this.obj[type] = [fn];
//     }else{
//       this.obj[type].push(fn)
//     }   
//   }

//   out(type,data){
//     for(const key in this.obj){
//       if(type===key){
//         this.obj[key].forEach(f => f(...data));
//       }else{
//         alert("key错误");
//       }
//     }
//   }
// }
// const res = new Event();
// res.on("xxx",fn1);
// res.on("xxx",fn2);
// res.out("xxx",["这是一","这是二"])
</script>